<template>
	<div>
		<div class="wrapper" ref="aaaa">
			<ul class="content">
				<li>分类列表1</li>
				<li>分类列表2</li>
				<li>分类列表3</li>
				<li>分类列表4</li>
				<li>分类列表5</li>
				<li>分类列表6</li>
				<li>分类列表7</li>
				<li>分类列表8</li>
				<li>分类列表9</li>
				<li>分类列表10</li>
				<li>分类列表11</li>
				<li>分类列表12</li>
				<li>分类列表13</li>
				<li>分类列表14</li>
				<li>分类列表15</li>
				<li>分类列表16</li>
				<li>分类列表17</li>
				<li>分类列表18</li>
				<li>分类列表19</li>
				<li>分类列表20</li>
				<li>分类列表21</li>
				<li>分类列表22</li>
				<li>分类列表23</li>
				<li>分类列表24</li>
				<li>分类列表25</li>
				<li>分类列表26</li>
				<li>分类列表27</li>
				<li>分类列表28</li>
				<li>分类列表29</li>
				<li>分类列表30</li>
				<li>分类列表31</li>
				<li>分类列表32</li>
				<li>分类列表33</li>
				<li>分类列表34</li>
				<li>分类列表35</li>
				<li>分类列表36</li>
				<li>分类列表37</li>
				<li>分类列表38</li>
				<li>分类列表39</li>
				<li>分类列表40</li>
				<li>分类列表41</li>
				<li>分类列表42</li>
				<li>分类列表43</li>
				<li>分类列表44</li>
				<li>分类列表45</li>
			
			</ul>

		</div>
	</div>
</template>

<script>
	import BScroll from 'better-scroll'

	export default {
		name: "Category",
		data() {
			return {
				scroll: null
			}
		},
		// crarred() { //在这个函数里面拿不到 页面元素
		// 	console.log(this.$refs.aaaa);
		// 	console.log( document.querySelector('.wrapper'));

		// },
		mounted() {
			this.scroll = new BScroll(document.querySelector('.wrapper'), {
				// probeType: 3,
				click:true,
				pullUpLoad: true
			})

			this.scroll.on('scroll', (position) => {
				console.log(position);
			})

			this.scroll.on('pullingUp', () => {
				console.log('上拉加载更多');
			})
		},
	
	}
</script>

<style scoped>
	.wrapper {
		height: 150px;
		background-color: skyblue;
		/* 这种在移动端滚动会非常卡顿 */
		overflow: hidden;
		/* overflow-y: scroll; */
	}
</style>
